<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
    <script src="../build/plugin.webgl.three-loader.js"></script>
    <script src='../resource/mmd/lib/mmdparser.min.js'></script>
    <script src='../resource/fbxdds/zlib.min.js'></script>
</head>

<style>
    canvas {
        border: 1px solid grey;
        background-color: #000;
        /*opacity: 0.05;*/
    }
</style>

<body>
    <canvas id="app" width="800" height="1200"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            webgl: {
              light: !true,
            },
        });
        $app.start();

        var $box = $app.add({
            style: {
                left: 400, top: 1120,
            },
        });

        // Easycanvas.loaders.MMDLoader.load('../resource/mmd/model/default/miku.pmx', function (data) {
        //     console.warn(data);
        // });

        var imgs = [
            $app.ddsLoader('../resource/fbxdds/mingxiu_yanzhao_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_body_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_body_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_yanzhao_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_face_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_body_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_body_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_hair_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_body_D.dds'),
            $app.ddsLoader('../resource/fbxdds/mingxiu_body_D.dds'),
        ];

        Easycanvas.loaders.FBXLoader('../resource/fbxdds/mx.fbx', function (data) {
            var index = 0;

            for (var i in data.Objects.Geometry) {
                var item = data.Objects.Geometry[i];

                $box.add({
                    webgl: window.Easycanvas.webglShapes.custom({
                        vertices: item.Vertices.a,
                        indices: item.PolygonVertexIndex.a,
                        img: imgs[index++],
                        scale: 700,
                        normals: item.LayerElementNormal[0].Normals.a,
                        textures: item.LayerElementUV[0].UV.a,
                        hasAlpha: true,
                        rx: 111,
                        rz: Easycanvas.Transition.pendulum(0, 360, 5000).loop(),
                    }),
                });
            }
        });
    </script>
</body>

